<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="origin" />
    <meta property="og:description" content="一、CommonJS Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用modu" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>web前端开发模块化规范 - 狗尾草的博客 - 博客园</title>
    
    <link rel="stylesheet" href="/css/blog-common.min.css?v=sqi5FxOybx6gjGoG6Zfy1wD-0AwznLNLYOVx7Y9tIN0" />
    <link id="MainCss" rel="stylesheet" href="/skins/darkgreentrip/bundle-darkgreentrip.min.css?v=4KE41eS1YQSSwl64fGzzTUj6ijs-YQFat4AaN-g_jxc" />
    <link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/blog/customcss/440875.css?v=Eccd6uwCAL/a4lEWnBL4dOjBK98=" />
    <link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="/skins/darkgreentrip/bundle-darkgreentrip-mobile.min.css?v=14y836ONdWu0_jxwS0i0t1S3KjlMl55rzUI5k1qhIdc" />
    
    <link type="application/rss+xml" rel="alternate" href="https://www.cnblogs.com/bgwhite/rss" />
    <link type="application/rsd+xml" rel="EditURI" href="https://www.cnblogs.com/bgwhite/rsd.xml" />
    <link type="application/wlwmanifest+xml" rel="wlwmanifest" href="https://www.cnblogs.com/bgwhite/wlwmanifest.xml" />
    <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
    <script src="/js/blog-common.min.js?v=W8J2DYaUeAZPX2Lx1iRh00kAY9PXrT8UdrrPQB3gEXU"></script>
    <script>
        var currentBlogId = 440875;
        var currentBlogApp = 'bgwhite';
        var cb_enable_mathjax = true;
        var isLogined = true;
    </script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
        tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']], processClass: 'math', processEscapes: true },
        TeX: {
        equationNumbers: { autoNumber: ['AMS'], useLabelIds: true },
        extensions: ['extpfeil.js', 'mediawiki-texvc.js'],
        Macros: {bm: "\\boldsymbol"}
        },
        'HTML-CSS': { linebreaks: { automatic: true } },
        SVG: { linebreaks: { automatic: true } }
        });
    </script>
    <script src="https://mathjax.cnblogs.com/2_7_5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    
</head>
<body>
    <a name="top"></a>
    <div id="page_begin_html">
        <link href="https://blog-static.cnblogs.com/files/bgwhite/test.css" rel="stylesheet">
        <!-- github图表 -->
        <a href="https://github.com/18291907191" target="_blank"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="https://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_github.png" ></a>
        <script>
        window.tctipConfig = {
                imagePrefix: "https://files.cnblogs.com/files/kdy11/",
                cssPrefix:     "https://files.cnblogs.com/files/kdy11",
                buttonImageId:  4,
                buttonTip:  "dashang",
                list:{
                    alipay: {qrimg: "http://images.cnblogs.com/cnblogs_com/bgwhite/1260914/o_zfb.bmp"},
                    weixin:{qrimg: "http://images.cnblogs.com/cnblogs_com/bgwhite/1260914/o_wx.png"},
                }
        };
        </script>
        <script src="https://files.cnblogs.com/files/kdy11/tctip.min.js"></script>
        <!-- 为页面添加爱心特效 -->
        <script type="text/javascript">
        //()();就是匿名函数自执行的写法   (function(window,docuemnt,undefined){})(window, document);  避免压缩出错  主要用于存放开发插件的代码，执行其中的代码时dom不一定存在，所以直接自动执行dom操作的代码
        (function(window,document,undefined){
            var hearts = [];
            window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame || 
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback){
                    setTimeout(callback,1000/60);
                }
            })();
            init();
        
            function init(){
                // 调用css函数自定义一个类名
                css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                attachEvent();
                gameloop();
            }
        
            //制作一个小心心向上变大逐渐消失的动画效果
            function gameloop(){
                for(var i=0;i<hearts.length;i++){
                    if(hearts[i].alpha <=0){//如果小心心的透明度小于等于0
                        document.body.removeChild(hearts[i].el);//删除创建的标签
                        hearts.splice(i,1);//从数组下标为i开始删除项目，删除1个
                        continue;
                     }
                     hearts[i].y--;//y轴位置自减  向上移动
                     hearts[i].scale += 0.004;//缩放自加
                     hearts[i].alpha -= 0.013;//透明度自减
                    //  设置当前小心心的固定定位样式  left为x坐标,top为Y坐标；透明度；移动(宽高都同时缩放scale)；背景颜色
                     hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
                }
                requestAnimationFrame(gameloop);
            }
        
            function attachEvent(){
                // var old = typeof window.onclick==="function" && window.onclick;//?????????????
                window.onclick = function(event){
                    //old && old();//?????????????????
                    createHeart(event);
                }
            }
        
            function createHeart(event){//随机生成小心心
                var d = document.createElement("div");//创建一个div
                d.className = "heart";
                hearts.push({
                    el : d,//遍历数组元素
                    x : event.clientX - 5,//鼠标相对于浏览器可视区域的坐标。不包括工具栏和滚动条
                    y : event.clientY - 5,
                    scale : 1,//缩放
                    alpha : 1,//透明度
                    color : randomColor()//调用随机生成颜色的函数
                });
                document.body.appendChild(d);//将创建的div标签放在body里面
            }
        
            function css(css){
                var style = document.createElement("style");
                style.type="text/css";
                try{//捕获异常  如果没有异常执行下面代码
                    style.appendChild(document.createTextNode(css));//创建一个文本节点附加到style里面  此处的css表示的是参数
                }
                catch(ex){//如果有异常
                    style.styleSheet.cssText = css;
                }
                //不管有无异常都会执行下方代码
                document.getElementsByTagName('head')[0].appendChild(style);//将style标签加到head里面
            }
        
            // 随机生成颜色
            function randomColor(){
                //Math.random()是令系统选取[0,1]之间的随机小数  （大于等于0；小于等于1）
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
            }
        })(window,document);
        </script>

    </div>
    
<!--done-->
<div id="home">
<div id="header">
	<div id="blogTitle">
        <a id="lnkBlogLogo" href="https://www.cnblogs.com/bgwhite/"><img id="blogLogo" src="/skins/custom/images/logo.gif" alt="返回主页" /></a>		
		
<!--done-->
<h1><a id="Header1_HeaderTitle" class="headermaintitle HeaderMainTitle" href="https://www.cnblogs.com/bgwhite/">狗尾草的博客</a>
</h1>
<h2>
海到无边天作岸，山登绝顶人为峰！
</h2>




		
	</div><!--end: blogTitle 博客的标题和副标题 -->
	<div id="navigator">
		
<ul id="navList">
<li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">
博客园</a>
</li>
<li>
<a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/bgwhite/">
首页</a>
</li>
<li>

<a id="blog_nav_newpost" class="menu" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">
新随笔</a>
</li>
<li>
<a id="blog_nav_contact" class="menu" href="https://msg.cnblogs.com/send/%E7%8B%97%E5%B0%BE%E8%8D%89%E7%9A%84%E5%8D%9A%E5%AE%A2">
联系</a></li>
<li>
<a id="blog_nav_rss" class="menu" href="https://www.cnblogs.com/bgwhite/rss/">
订阅</a>
<!--<partial name="./Shared/_XmlLink.cshtml" model="Model" /></li>--></li>
<li>
<a id="blog_nav_admin" class="menu" href="https://i.cnblogs.com/">
管理</a>
</li>
</ul>


		<div class="blogStats">
			
			<span id="stats_post_count">随笔 - 
223&nbsp; </span>
<span id="stats_article_count">文章 - 
3&nbsp; </span>
<span id="stats-comment_count">评论 - 
38</span>

			
		</div><!--end: blogStats -->
	</div><!--end: navigator 博客导航栏 -->
</div><!--end: header 头部 -->

<div id="main">
	<div id="mainContent">
	<div class="forFlow">
		<div id="post_detail">
    <!--done-->
    <div id="topics">
        <div class="post">
            <h1 class = "postTitle">
                
<a id="cb_post_title_url" class="postTitle2" href="https://www.cnblogs.com/bgwhite/articles/9241983.html">web前端开发模块化规范</a>

            </h1>
            <div class="clear"></div>
            <div class="postBody">
                
<div id="cnblogs_post_body" class="blogpost-body ">
    <div>一、CommonJS</div>
<div><hr /></div>
<div>Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 定义模块math.js
var basicNum = 0;
function add(a, b) {
return a + b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
add: add,
basicNum: basicNum
}
// 引用自定义的模块时，参数包含路径，可省略.js
var math = require(&lsquo;./math&rsquo;);
math.add(2, 5);
// 引用核心模块时，不需要带路径
var http = require(&lsquo;http&rsquo;);
http.createService(&hellip;).listen(3000);</pre>
</div>
</div>
<div>commonJS用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。</div>
<div>&nbsp;</div>
<div><br />二、AMD和require.js</div>
<div><hr /></div>
<div>AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。这里介绍用require.js实现AMD规范的模块化：用require.config()指定引用路径等，用define()定义模块，用require()加载模块。</div>
<div>首先我们需要引入require.js文件和一个入口文件main.js。main.js中配置require.config()并规定项目中用到的基础模块。</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">/** 网页中引入require.js及main.js **/
/** main.js 入口文件/主模块 **/
// 首先用config()指定各模块路径和引用名
require.config({
baseUrl: &ldquo;js/lib&rdquo;,
paths: {
&ldquo;jquery&rdquo;: &ldquo;jquery.min&rdquo;, //实际路径为js/lib/jquery.min.js
&ldquo;underscore&rdquo;: &ldquo;underscore.min&rdquo;,
}
});
// 执行基本操作
require([&ldquo;jquery&rdquo;,&rdquo;underscore&rdquo;],function($,_){
// some code here
});
引用模块的时候，我们将模块名放在[]中作为reqiure()的第一参数；如果我们定义的模块本身也依赖其他模块,那就需要将它们放在[]中作为define()的第一参数。
// 定义math.js模块
define(function () {
var basicNum = 0;
var add = function (x, y) {
return x + y;
};
return {
add: add,
basicNum :basicNum
};
});
// 定义一个依赖underscore.js的模块
define([&lsquo;underscore&rsquo;],function(_){
var classify = function(list){
_.countBy(list,function(num){
return num &gt; 30 ? &lsquo;old&rsquo; : &lsquo;young&rsquo;;
})
};
return {
classify :classify
};
})
// 引用模块，将模块放在[]内
require([&lsquo;jquery&rsquo;, &lsquo;math&rsquo;],function($, math){
var sum = math.add(10,20);
$(&ldquo;#sum&rdquo;).html(sum);
});
</pre>
</div>
<p>　　</p>
</div>
<div>三、CMD和sea.js</div>
<div><hr /></div>
<div>require.js在申明依赖的模块时会在第一之间加载并执行模块内的代码：</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">define([&ldquo;a&rdquo;, &ldquo;b&rdquo;, &ldquo;c&rdquo;, &ldquo;d&rdquo;, &ldquo;e&rdquo;, &ldquo;f&rdquo;], function(a, b, c, d, e, f) {
// 等于在最前面声明并初始化了要用到的所有模块
if (false) {
// 即便没用到某个模块 b，但 b 还是提前执行了
b.foo()
}
});
CMD是另一种js模块化方案，它与AMD很类似，不同点在于：AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。此规范其实是在sea.js推广过程中产生的。
/** AMD写法 **/
define([&ldquo;a&rdquo;, &ldquo;b&rdquo;, &ldquo;c&rdquo;, &ldquo;d&rdquo;, &ldquo;e&rdquo;, &ldquo;f&rdquo;], function(a, b, c, d, e, f) {
// 等于在最前面声明并初始化了要用到的所有模块
a.doSomething();
if (false) {
// 即便没用到某个模块 b，但 b 还是提前执行了
b.doSomething()
}
});
/** CMD写法 **/
define(function(require, exports, module) {
var a = require(&lsquo;./a&rsquo;); //在需要时申明
a.doSomething();
if (false) {
var b = require(&lsquo;./b&rsquo;);
b.doSomething();
}
});
/** sea.js **/
// 定义模块 math.js
define(function(require, exports, module) {
var $ = require(&lsquo;jquery.js&rsquo;);
var add = function(a,b){
return a+b;
}
exports.add = add;
});
// 加载模块
seajs.use([&lsquo;math.js&rsquo;], function(math){
var sum = math.add(1+2);
});
</pre>
</div>
<p>　　</p>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div><br /> <br />四、ES6 Module</div>
<div><hr /></div>
<div>ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。</div>
<div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
return a + b;
};
export { basicNum, add };
/** 引用模块 **/
import { basicNum, add } from &lsquo;./math&rsquo;;
function test(ele) {
ele.textContent = add(99 + basicNum);
}
</pre>
</div>
<p>　　</p>
</div>
</div>
<div>如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名。其实ES6还提供了export default命令，为模块指定默认输出，对应的import语句不需要使用大括号。这也更趋近于ADM的引用写法。</div>
<div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">/** export default **/
//定义输出
export default { basicNum, add };
//引入
import math from &lsquo;./math&rsquo;;
function test(ele) {
ele.textContent = math.add(99 + math.basicNum);
}
</pre>
</div>
<p>　　</p>
</div>
</div>
<div>ES6的模块不是对象，import命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。</div>
<div>&nbsp;</div>
<div><br /> <br />五、 ES6 模块与 CommonJS 模块的差异</div>
<div><hr /></div>
<div>1.CommonJs模块输出的是一个值的拷贝，ES6模块输出的是值的引用。</div>
<div>&nbsp;</div>
<div>CommonJS模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就 影响不到这个值。</div>
<div>&nbsp;</div>
<div>ES6模块的运行机制与CommonJS不一样。JS引擎对脚本静态 分析的时候，遇到的模块家在命令import，就会</div>
<div>&nbsp;</div>
<div>生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像模块里面的变量绑定其所在的模块。</div>
<div>&nbsp;</div>
<div>2. CommonJS 模块是运行时加&nbsp;Unix 系统的&ldquo;符号连接&rdquo;，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，载，ES6 模块是编译时输出接口。</div>
<div>&nbsp;</div>
<div>运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为&ldquo;运行时加载&rdquo;。</div>
<div>&nbsp;</div>
<div>编译时加载: ES6 模块不是对象，而是通过 export 命令显式指定输出的代码，import时采用静态命令的形式。即在import时可以指定加载某个输出值，而不是加载整个模块，这种加载称为&ldquo;编译时加载&rdquo;。CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。</div>
</div>
<div id="MySignature"></div>
<div class="clear"></div>
<div id="blog_post_info_block">
    <div id="blog_post_info"></div>
    <div class="clear"></div>
    <div id="post_next_prev"></div>
</div>
            </div>
            <div class="postDesc">posted @ 
<span id="post-date">2018-06-29 09:55</span>&nbsp;<a href="https://www.cnblogs.com/bgwhite/">狗尾草的博客</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>) <a href="https://i.cnblogs.com/EditArticles.aspx?postid=9241983" rel="nofollow"> 编辑</a> <a href="javascript:void(0)" onclick="AddToWz(9241983); return false;">收藏</a>
</div>
        </div>
	    
	    
    </div><!--end: topics 文章、评论容器-->
</div>
<script src="https://common.cnblogs.com/highlight/9.12.0/highlight.min.js"></script>
<script>markdown_highlight();</script>
<script>
    var allowComments = true, cb_blogId = 440875, cb_blogApp = 'bgwhite', cb_blogUserGuid = '9f65c24f-7060-462b-6737-08d5d829f90d';
    var cb_entryId = 9241983, cb_entryCreatedDate = '2018-06-29 09:55', cb_postType = 2; 
    loadViewCount(cb_entryId);
</script><a name="!comments"></a>
<div id="blog-comments-placeholder"></div>
<script>
    var commentManager = new blogCommentManager();
    commentManager.renderComments(0);
</script>

<div id="comment_form" class="commentform">
    <a name="commentform"></a>
    <div id="divCommentShow"></div>
    <div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div>
    <div id="comment_form_container"></div>
    <div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
    <div id="ad_t2"></div>
    <div id="opt_under_post"></div>
    <script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
    <script>
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
    </script>
    <script>
        googletag.cmd.push(function () {
            googletag.defineSlot("/1090369/C1", [300, 250], "div-gpt-ad-1546353474406-0").addService(googletag.pubads());
            googletag.defineSlot("/1090369/C2", [468, 60], "div-gpt-ad-1539008685004-0").addService(googletag.pubads());
            googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
    </script>
    <div id="cnblogs_c1" class="c_ad_block">
        <div id="div-gpt-ad-1546353474406-0" style="height:250px; width:300px;"></div>
    </div>
    
    <div id="cnblogs_c2" class="c_ad_block">
        <div id="div-gpt-ad-1539008685004-0" style="height:60px; width:468px;">
            <script>
                if (new Date() >= new Date(2018, 9, 13)) {
                    googletag.cmd.push(function () { googletag.display("div-gpt-ad-1539008685004-0"); });
                }
            </script>
        </div>
    </div>
    <div id="under_post_kb"></div>
    <div id="HistoryToday" class="c_ad_block"></div>
    <script type="text/javascript">
        fixPostBody();
        setTimeout(function () { incrementViewCount(cb_entryId); }, 50);
        deliverAdT2();
        deliverAdC1();
        deliverAdC2();
        loadNewsAndKb();
        loadBlogSignature();
LoadPostCategoriesTags(cb_blogId, cb_entryId);        LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
        GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
        loadOptUnderPost();
        GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);
    </script>
</div>
	</div><!--end: forFlow -->
	</div><!--end: mainContent 主体内容容器-->

	<div id="sideBar">
		<div id="sideBarMain">
			
<div id="sidebar_news" class="newsItem">
            <script>loadBlogNews();</script>
</div>

			<div id="blog-calendar" style="display:none"></div><script>loadBlogDefaultCalendar();</script>
			
			<div id="leftcontentcontainer">
				<div id="blog-sidecolumn"></div>
                    <script>loadBlogSideColumn();</script>
			</div>
			
		</div><!--end: sideBarMain -->
	</div><!--end: sideBar 侧边栏容器 -->
	<div class="clear"></div>
	</div><!--end: main -->
	<div class="clear"></div>
	<div id="footer">
		<!--done-->
Copyright &copy; 2019 狗尾草的博客
<br /><span id="poweredby">Powered by .NET Core 3.0.0-preview9-19423-09 on Linux</span>



	</div><!--end: footer -->
</div><!--end: home 自定义的最大容器 -->


    <div id="page_end_html">
        <script src="https://blog-static.cnblogs.com/files/bgwhite/Comments.js"></script>

<script charset='utf-8' src="https://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript"> 
//为右下角推荐推荐区域添加关注按钮
window.onload = function () {
    $('#div_digg').prepend('<div style="padding-bottom: 5px"><span class="icon_favorite" style="padding-top: 2px"></span><a onclick="cnblogs.UserManager.FollowBlogger(\'9f65c24f-7060-462b-6737-08d5d829f90d\');" href="javascript:void(0);" style="font-weight: bold; padding-left:5px;">关注一下楼主吧</a> </div>');
}
</script>
<script type="text/javascript" language="javascript">
　　//icon的设置
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://files.cnblogs.com/files/bgwhite/favicon-20180724083654688.ico";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);//将link加到head里面
</script>

<script language = "javascript" type = "text/javascript">
//文章自动生成目录1
  function GenerateContentList() {
    var jquery_h3_list = $('#cnblogs_post_body h3'); //如果你的章节标题不是h3,只需要将这里的h3换掉即可
    if (jquery_h3_list.length > 0) {
      var content = '<a name="_labelTop"></a>';
      content += '<div id="navCategory">';
      content += '<p style="font-size:18px"><b>阅读目录</b></p>';
      content += '<ul>';
      for (var i = 0; i < jquery_h3_list.length; i++) {
        var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
        $(jquery_h3_list[i]).before(go_to_top);
        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
        content += li_content;
      }
      content += '</ul>';
      content += '</div>';
      if ($('#cnblogs_post_body').length != 0) {
        $($('#cnblogs_post_body')[0]).prepend(content);
      }
    }
  }
GenerateContentList(); 
</script>
<script type="text/javascript">
//文章目录自动生成2
var a = $(document);
a.ready(function () {
    var b = $('body'),
        c = 'cnblogs_post_body',
        d = 'sideToolbar',
        e = 'sideCatalog',
        f = 'sideCatalog-catalog',
        g = 'sideCatalogBtn',
        h = 'sideToolbar-up',
        i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:300px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>',
        j = '',
        k = 200,
        l = 0,
        m = 0,
        n = 0,
        o, p = 18,
        q = true,
        r = true,
        s = $('#' + c);
    if (s.length === 0) {
        return
    };
    b.append(i);
    o = s.find(':header');
    if (o.length > p) {
        r = false;
        var t = s.find('h1');
        var u = s.find('h2');
        if (t.length + u.length > p) {
            q = false
        }
    };
	j += '<li><span style="font-size: 14pt;">标题导航</span></li>';
    o.each(function (t) {
        var u = $(this),
            v = u[0];

        var title=u.text();
        var text=u.text();

        u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
		
        if (v.localName === 'h2') {
            l++;
            m = 0;
            if(text.length>26) text=text.substr(0,26)+"...";
            j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
        } else if (v.localName === 'h3') {
            m++;
            n = 0;
            if(q){
	            if(text.length>30) text=text.substr(0,30)+"...";
	            j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
        	}
        } 
    });
    $('#' + f + '>ul').html(j);
    b.data('spy', 'scroll');
    b.data('target', '.sideCatalogBg');
    $('body').scrollspy({
        target: '.sideCatalogBg'
    });
    $sideCatelog = $('#' + e);
    $('#' + g).on('click', function () {
        if ($(this).hasClass('sideCatalogBtnDisable')) {
            $sideCatelog.css('visibility', 'hidden')
        } else {
            $sideCatelog.css('visibility', 'visible')
        };
        $(this).toggleClass('sideCatalogBtnDisable')
    });
    $('#' + h).on('click', function () {
        $("html,body").animate({
            scrollTop: 0
        }, 500)
    });
    $sideToolbar = $('#' + d);
    a.on('scroll', function () {
        var t = a.scrollTop();
        if (t > k) {
            $sideToolbar.css('display', 'block')
        } else {
            $sideToolbar.css('display', 'none')
        }
    })
});
</script>
    </div>
</body>
</html>
